<template>
    <div id="apps">
        <div style="margin-left: 20px;">
            <headtitle :title="title"></headtitle>
            <!-- <selectbeforethired :title="title" :sel1="sel1"></selectbeforethired> -->
        </div>
        <div style="margin-left: 20px;">
            <h3>问题评价管理</h3>
            <div style="width: 95%;" id="select1">
                <select name="" id="sel1" selected="null" @change="sel">
                    <option value="">满意度</option>

                </select>
                <select name="" id="sel2" selected="null" @change="sel">
                    <option value="">问题性质</option>

                </select>
                <select name="" id="sel3" selected="null" @change="sel">
                    <option value="">问题类别</option>

                </select>
                <select name="" id="sel4" selected="null" @change="sel">
                    <option value="">所属市区</option>

                </select>
                <select name="" id="sel5" selected="null" @change="sel" style="width: 240px;">
                    <option value="">处理单位</option>

                </select>
               

                <div class="demo-date-picker" style="display: inline-block;border: 1px solid black;border-radius: 4px;">
                    <div class="block" @click="sel2">
                        <el-date-picker v-model="value1" type="date" placeholder="年/月/日" :size="size"
                            style="width: 130px;height: 25px;" />
                    </div>

                </div>
                <span>至</span>
                <div class="demo-date-picker" style="display: inline-block;border: 1px solid black;border-radius: 4px;">
                    <div class="block" @click="sel2">
                        <el-date-picker v-model="value2" type="date" placeholder="年/月/日" :size="size"
                            style="width: 130px;height: 25px;" />
                    </div>

                </div>
            </div>
            <div style="margin-top: 20px;" id="select2">
                <div id="left">
                    <input type="text" style=" width: 300px; height: 28px;">
                    <div
                        style="width: 80px;height: 32px;border: 0px;background-color: #169bd5;color: white;line-height: 28px;text-align: center;display: inline-block;" id="tjsel" @click="tjsel">
                        搜索</div>
                </div>
                <div id="right"
                    style="z-index: 999;position: absolute;right: 20%;background-color: white;height: 30px;overflow: hidden;border: #169bd5 1px solid;">
                    <span
                        style="width: 150px;background-color: #169bd5;color: white;height: 30px;display: inline-block;line-height: 30px;text-align: center;"
                        @click="open">自定义列表</span>
                    <br>
                    <input type="checkbox" checked="checked" value="1" onclick="return false;"><span
                        style="font-size: 14px;">具体问题</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;" value="2"><span style="font-size: 14px;">企业名称</span>
                    <br>
                    <input type="checkbox" id="wtlb"><span style="font-size: 14px;">问题类别</span>
                    <br>
                    <input type="checkbox" id="wtxz"><span style="font-size: 14px;">问题性质</span>
                    <br>
                    <input type="checkbox" id="blzt"><span style="font-size: 14px;">办理状态</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;" ><span style="font-size: 14px;" value="9">满意度</span>
                    <br>
                  
                    <input type="checkbox" id="sssq" ><span style="font-size: 14px;">所属市区</span>
                    <br>
                    <input type="checkbox" id="cldw"><span style="font-size: 14px;" value="9">处理单位</span>
                    <br>
                    <input type="checkbox" id="tjsj"><span style="font-size: 14px;" value="10">提交时间</span>
                    <br>
                    <input type="checkbox"  checked="checked" onclick="return false;"><span style="font-size: 14px;" value="11">评价时间</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;"><span style="font-size: 14px;" value="12">评价人</span>
                    <br>
                    <input type="checkbox" id="pjrzw"><span style="font-size: 14px;" value="13">评价人职务</span>
                    <br>
                    <input type="checkbox"  checked="checked" onclick="return false;"><span style="font-size: 14px;" value="14">评价人手机</span>
                    <br>
                    <input type="checkbox" id="gddh"><span style="font-size: 14px;" value="14">固定电话</span>
                      

                </div>
                <div
                    style="width: 130px;height: 28px;background-color: #169bd5;display: inline-block;margin-left: 50px;color: white;text-align: center;line-height: 28px;" @click="exports">
                    导出数据</div>
            </div>
        </div>
        <div id="table1">
            <div style="margin-left: 20px;">

                <el-table :data="tableData" style="width: 100% ;color: black;" height="450" border="true"
                    :cell-style="{ textAlign: 'center'  , padding:'6px 0'}" :header-cell-style="{ 'text-align': 'center', color: 'black' }">
                    <el-table-column fixed prop="id" label="序号" width="60" />
                    <el-table-column prop="name" label="具体问题" width="500" />
                    <el-table-column prop="state" label="企业名称" width="250" />
                    <el-table-column prop="city" label="问题类别" width="120" v-if="b" />
                    <el-table-column prop="address" label="问题性质" width="120" v-if="c"/>
                    <el-table-column prop="zip" label="办理状态" width="150" v-if="d"/>
                    <el-table-column prop="data1" label="满意度" width="100" />
                    <el-table-column prop="data2" label="所属市区" width="150"  v-if="e"/>
                    <el-table-column prop="data3" label="处理单位" width="200" v-if="f"/>
                    <el-table-column prop="data4" label="提交时间" width="200" v-if="g" />
                    <el-table-column prop="data5" label="评价时间" width="200" />
                    <el-table-column prop="data6" label="评价" width="100" />
                    <el-table-column prop="data7" label="评价人手机" width="200" />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope"  >
                            <el-button link type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
                            
                        </template>
                    </el-table-column>


                </el-table>

            </div>
        </div>
        <!-- 分页 -->
        <div style="margin-left: 20px;" id="pageall">
           <span style="border: 1px solid #e4e4e4;height: 30px;width: 50px;line-height: 30px;text-align: center;margin-right: 30px;">首页</span>

            <div class="page">
                <el-pagination background layout="prev, pager, next" :total="totallenght" @prev-click="prev"
                    @next-click="next" />

            </div>
            <span style="border: 1px solid #e4e4e4;height: 30px;width: 50px;line-height: 30px;text-align: center;margin-left: 30px;">尾页</span>
        </div>
</div>
</template>

<script lang="ts">


import Axios from "@/router/ycyaxios/axiosinstance";
// import FileSaver from "file-saver";
import * as XLSX from 'xlsx'
import { toRaw } from '@vue/reactivity'
import { ref, onMounted, } from 'vue'
import { useStore } from "vuex"
import { useRouter } from 'vue-router'
// import {components} from 'vue'
// import  selectbeforethired from '../../components/Problems/selectbeforethired'
import headtitle from '../../components/Problems/headtitle.vue'
export default {
    name: 'Evaluationmanagement',
    data() {
        return {
            title: "问题评价管理",
          
        }
    },
    components: {
        headtitle,
        //    selectbeforethired,
    },
    setup() {
        let b:any=ref("true");
        let c:any=ref("true");
        let d:any=ref("true");
        let e:any=ref("true");
        let f:any=ref("true");
        let g:any=ref("true");
        let h:any=ref("true");
        let i:any=ref("true");
        const router = useRouter()
        const store = useStore();
        let data: any = ref();
        let idshow:any=ref();
 
//获取数据
const totallenght: any = ref()
 const tableData: any = ref('')
store.commit("getevalu", { page: 1 })
data = [];
        data = store.state.ycy.evaluelist;
        tableData.value = data;
        totallenght.value = tableData.value.length;
//导出表格数据
const exports = () => {
            // Axios({
            //     method: "post",
            //     url: "/questionList/exportlist",
            //     params: {


                    
            //     }
            // }).then((resp) => {
            //     console.log(resp)
            // })
            const data:any = XLSX.utils.json_to_sheet(tableData.value)//此处tableData.value为表格的数据
            const wb:any = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为自定义的sheet表名
            XLSX.writeFile(wb, 'test.xlsx')//test.xlsx为自定义的文件名
            console.log(111)
           

        }
///选择框的数据开始
const sel = () => {
            const sel1: any = document.getElementById("sel1");
            const sele1: any = sel1.value;
            const sel2: any = document.getElementById("sel2");
            const sele2: any = sel2.value;
            const sel3: any = document.getElementById("sel3");
            const sele3: any = sel3.value;
            const sel4: any = document.getElementById("sel4");
            const sele4: any = sel4.value;
            const sel5: any = document.getElementById("sel5");
            const sele5: any = sel5.value;
            // const sel6: any = document.getElementById("sel6");
            // const sele6: any = sel6.value;

            store.commit("selevalua", { page: 1, sel1: sele1, sel2: sele2, sel3: sele3, sel4: sele4, sel5: sele5 })
        }
             const sel2 = () => {
            const sel1: any = document.getElementById("sel1");
            const sele1: any = sel1.value;
            const sel2: any = document.getElementById("sel2");
            const sele2: any = sel2.value;
            const sel3: any = document.getElementById("sel3");
            const sele3: any = sel3.value;
            const sel4: any = document.getElementById("sel4");
            const sele4: any = sel4.value;
            const sel5: any = document.getElementById("sel5");
            const sele5: any = sel5.value;
            // const sel6: any = document.getElementById("sel6");
            // const sele6: any = sel6.value;
            const data: any = value1.value;
            const year: any = data.getFullYear()
            const years: any = year.toString()
            const day: any = data.getDate()
            const days: any = day.toString()
            const month: any = data.getMonth()
            const months: any = month.toString()
            const daytime: any = (years + "-" + months + "-" + days)
            //开始时间戳
            let start = new Date(daytime).getTime();
            const data2: any = value2.value;
            const year2: any = data2.getFullYear()
            const years2: any = year2.toString()
            const day2: any = data2.getDate()
            const days2: any = day2.toString()
            const month2: any = data2.getMonth()
            const months2: any = month2.toString()
            const daytime2: any = (years2 + "-" + months2 + "-" + days2)
            //结束时间戳
            let end = new Date(daytime2).getTime();

            //  console.log(start,end )

            store.commit("selevalua", { page: 1, sel1: sele1, sel2: sele2, sel3: sele3, sel4: sele4, sel5: sele5 })
        }
///选择框的数据结束
const tjsel = () => {
            const tjsel: any = document.getElementById("tjsel");
            const tjsel1: any = tjsel.value;
            // console.log(tjsel1)
            store.commit("tjselevalua", { page: 1, tj: tjsel1 })
        }
///搜索框选择数据结束
const handleClick = (value:any) => {
//   console.log(value)
const datas=JSON.stringify(value)
router.push({path:"/SelectPj", query:{name:datas}})
}
        const size = ref<'default'>('default')

        const value1 = ref('')
        const value2 = ref('')
        // let datas=[];
        const open = () => {
            const a: any = document.getElementById("right");
            const wtlb:any=document.getElementById("wtlb");
             b.value=wtlb.checked;
             const wtxz:any=document.getElementById("wtxz");
             c.value=wtxz.checked;
             const blzt:any=document.getElementById("blzt");
             d.value=blzt.checked;
             const sssq:any=document.getElementById("sssq");
             e.value=sssq.checked;
             const cldw:any=document.getElementById("cldw");
             f.value=cldw.checked;
             const tjsj:any=document.getElementById("tjsj");
             g.value=tjsj.checked;
             const pjrzw:any=document.getElementById("pjrzw");
             h.value=pjrzw.checked;
             const gddh:any=document.getElementById("gddh");
             i.value=gddh.checked;



           
            if (parseInt(a.style.height) == 30) {
                a.style.height = "320px";
                // console.log(1111111);

            }
            else if (parseInt(a.style.height) == 320) {
                a.style.height = "30px";

            }

        }
        let page = 0;
        const prev = () => {
            page--;
            console.log(page)
        }
        const next = () => {
            page++;
            console.log(page)
        }
        // const tableData = [
        //     {
        //         date: '1',
        //         name: '南关区基础设施扩建项目招标流程从哪里能收集相关信息？',
        //         state: '城兴物业管理有限公司',
        //         city: '项目建设',
        //         address: '政策咨询',
        //         zip: '已答复已评价',
        //         data1: '非常满意',
        //         data2: '临海市南关区',
        //         data3: '市发改委基建办',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "2019-06-04 04:27:34",
        //         data6:'李天然',
        //         data7:'18281254806',
        //         data8:'查看',
             
        //     },
        //     {
        //         date: '2',
        //         name: '南关区基础设施扩建项目招标流程从哪里能收集相关信息？',
        //         state: '城兴物业管理有限公司',
        //         city: '项目建设',
        //         address: '政策咨询',
        //         zip: '已答复已评价',
        //         data1: '非常满意',
        //         data2: '临海市南关区',
        //         data3: '市发改委基建办',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "2019-06-04 04:27:34",
        //         data6:'李天然',
        //         data7:'18281254806',
        //         data8:'查看',
             
        //     },
        //     {
        //         date: '3',
        //         name: '南关区基础设施扩建项目招标流程从哪里能收集相关信息？',
        //         state: '城兴物业管理有限公司',
        //         city: '项目建设',
        //         address: '政策咨询',
        //         zip: '已答复已评价',
        //         data1: '非常满意',
        //         data2: '临海市南关区',
        //         data3: '市发改委基建办',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "2019-06-04 04:27:34",
        //         data6:'李天然',
        //         data7:'18281254806',
        //         data8:'查看',
             
        //     },
        //     {
        //         date: '4',
        //         name: '南关区基础设施扩建项目招标流程从哪里能收集相关信息？',
        //         state: '城兴物业管理有限公司',
        //         city: '项目建设',
        //         address: '政策咨询',
        //         zip: '已答复已评价',
        //         data1: '非常满意',
        //         data2: '临海市南关区',
        //         data3: '市发改委基建办',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "2019-06-04 04:27:34",
        //         data6:'李天然',
        //         data7:'18281254806',
        //         data8:'查看',
             
        //     },
        //     {
        //         date: '5',
        //         name: '南关区基础设施扩建项目招标流程从哪里能收集相关信息？',
        //         state: '城兴物业管理有限公司',
        //         city: '项目建设',
        //         address: '政策咨询',
        //         zip: '已答复已评价',
        //         data1: '非常满意',
        //         data2: '临海市南关区',
        //         data3: '市发改委基建办',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "2019-06-04 04:27:34",
        //         data6:'李天然',
        //         data7:'18281254806',
        //         data8:'查看',
             
        //     },
        //     {
        //         date: '6',
        //         name: '南关区基础设施扩建项目招标流程从哪里能收集相关信息？',
        //         state: '城兴物业管理有限公司',
        //         city: '项目建设',
        //         address: '政策咨询',
        //         zip: '已答复已评价',
        //         data1: '非常满意',
        //         data2: '临海市南关区',
        //         data3: '市发改委基建办',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "2019-06-04 04:27:34",
        //         data6:'李天然',
        //         data7:'18281254806',
        //         data8:'查看',
             
        //     },
        //     {
        //         date: '7',
        //         name: '南关区基础设施扩建项目招标流程从哪里能收集相关信息？',
        //         state: '城兴物业管理有限公司',
        //         city: '项目建设',
        //         address: '政策咨询',
        //         zip: '已答复已评价',
        //         data1: '非常满意',
        //         data2: '临海市南关区',
        //         data3: '市发改委基建办',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "2019-06-04 04:27:34",
        //         data6:'李天然',
        //         data7:'18281254806',
        //         data8:'查看',
             
        //     },
        //     {
        //         date: '8',
        //         name: '南关区基础设施扩建项目招标流程从哪里能收集相关信息？',
        //         state: '城兴物业管理有限公司',
        //         city: '项目建设',
        //         address: '政策咨询',
        //         zip: '已答复已评价',
        //         data1: '非常满意',
        //         data2: '临海市南关区',
        //         data3: '市发改委基建办',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "2019-06-04 04:27:34",
        //         data6:'李天然',
        //         data7:'18281254806',
        //         data8:'查看',
             
        //     },
        //     {
        //         date: '9',
        //         name: '南关区基础设施扩建项目招标流程从哪里能收集相关信息？',
        //         state: '城兴物业管理有限公司',
        //         city: '项目建设',
        //         address: '政策咨询',
        //         zip: '已答复已评价',
        //         data1: '非常满意',
        //         data2: '临海市南关区',
        //         data3: '市发改委基建办',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "2019-06-04 04:27:34",
        //         data6:'李天然',
        //         data7:'18281254806',
        //         data8:'查看',
             
        //     },
        //     {
        //         date: '10',
        //         name: '南关区基础设施扩建项目招标流程从哪里能收集相关信息？',
        //         state: '城兴物业管理有限公司',
        //         city: '项目建设',
        //         address: '政策咨询',
        //         zip: '已答复已评价',
        //         data1: '非常满意',
        //         data2: '临海市南关区',
        //         data3: '市发改委基建办',
        //         data4: "2019-06-04 04:27:34",
        //         data5: "2019-06-04 04:27:34",
        //         data6:'李天然',
        //         data7:'18281254806',
        //         data8:'查看',
             
        //     },
            
            
        // ];
        // const totallenght = tableData.length
        const shortcuts = [
            {
                text: 'Today',
                value: new Date(),
            },
            {
                text: 'Yesterday',
                value: () => {
                    const date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24)
                    return date
                },
            },
            {
                text: 'A week ago',
                value: () => {
                    const date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                    return date
                },
            },
        ]

        const disabledDate = (time: Date) => {
            return time.getTime() > Date.now()
        };
        return {
            disabledDate,
            size,
            shortcuts,
            value2,
            value1,
            tableData,
            totallenght,
            prev,
            next,
            handleClick,
            open,
            b,c,d,e,f ,g,h,i,exports,
            sel,sel2,tjsel,
        }
    }
}
</script>

<style scoped>
#apps {
    background-color: white;
    /* width: 1200px;
     */
     width: 80%;
    /* height: 200px; */
    /* border: 1px solid red; */
    border-radius: 5px;
}

#pageall {
    width: 95%;
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

select {
    width: 120px;
    height: 28px;

}

#select1 {
    display: flex;
    justify-content: space-between;
}

#select2 {
    width: 95%;
    display: flex;
    justify-content: space-between;
}

#table1 {
    width: 95%;
    margin-top: 40px;
}
</style>